<template>
    <div>
        <div class="text-xl ">【服务数据信息】</div>
        <div ref="chart" class="w-full h-full"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const colorList = [
    "#C1232B",
    "#B5C334",
    "#FCCE10",
    "#E87C25",
    "#27727B",
    "#FE8463",
    "#9BCA63",
    "#FAD860",
    "#F3A43B",
    "#60C0DD",
    "#D7504B",
    "#C6E579",
    "#F4E001",
    "#F0805A",
    "#26C0C0",
];
let mychart = null
const chart = ref(null)
const props = defineProps(['data'])
const option = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ["苹果", "樱桃"],
        textStyle: {
            color: "#fff"
        }
    },
    xAxis: {
        type: 'category',
        data: props.data.servers.map(i => i.name),
        name: '服务',
        axisLabel: {
            color: '#fff'
        },
        nameTextStyle: {
            color: '#fff'
        }
    },
    yAxis: {
        type: 'value',
        data: props.data.servers.map(i => i.value),
        axisLine: {
            show: true,
            lineStyle: {
                color: "#fff"
            }
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            color: '#fff'
        },
        name: '数值/%',
        nameTextStyle: {
            color: '#fff'
        },
        axisTick: {
            show: true,
        }
    },
    series: [{
        type: 'bar',
        name: "苹果",
        data: props.data.servers.map(i => {
            return {
                name: i.name,
                value: i.value
            }
        }),
        label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
        }
    },
    {
        name: "樱桃",
        type: 'bar',
        data: props.data.servers.map(i => {
            return {
                name: i.name,
                value: i.value
            }
        }),
        label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
        }
    },
    ],
    grid: {
        top: 40,
        left: 0,
        right: 40,
        bottom: 20,
        containLabel: true
    },
})
const initChart = () => {
    mychart.setOption(option.value)
}
onMounted(() => {
    mychart = echarts.init(chart.value)
    initChart()
})
window.addEventListener('resize', () => {
    mychart.resize()
})
</script>
